<template>
    <view class="box">
        <view style="margin-top: 30rpx;margin-left: 20px;margin-bottom: 80rpx;">
            <view>
                <text class="welcome">欢迎回来!</text>
            </view>
			<view style="margin-top: 15rpx;">
				<text class="memo">欢迎使用,点我切换 [登陆模板2] </text>
			</view>
        </view>
        <view class="input-item iconfont icon-zhanghu2">
            <input class="input" v-model="username" placeholder="请输入您的账号" placeholder-class="address" value="admin"/>
        </view>
		
        <view class="input-item iconfont icon-mima">
            <input class="input" password v-model="password" placeholder="请输入您的密码" placeholder-class="address" value="123456"/>
        </view>
		
		<view class="input-item iconfont icon-yanzhengma5">
		    <input class="input" v-model="captchaCode" placeholder="请输入验证码" placeholder-class="address"/>
			<image :src= "captchaBase64" @click="captcha" style="width: 120px;height: 46px;margin-right: 10rpx;border-radius: 5rpx;"/>
		</view>
        <view class="button" @click="login">登录</view>
		<view class="ortherLogin">
			忘记密码 注册账号
			<!-- <text class="iconfont icon-qq"></text> -->
		</view>
		
    </view>
</template>


<script>
	// import api from '../../config/config.js';
	
    export default {
        data() {
            return {
                captchaBase64: '',
				captchaKey:'',
				captchaCode:'',
				username:'',
				password:'',
            }
        },
        onLoad() {
			this.captcha();
        },
        methods: {
			
			// 获得验证码
            captcha() {
				uni.request({
				    url: api.apiUrl+'api/v1/auth/captcha', //仅为示例，并非真实接口地址。
				    data: {
				        text: 'uni.request'
				    },
					method:"GET",
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res);
				        this.captchaBase64 = res.data.data.captchaBase64;
						this.captchaKey=res.data.data.captchaKey;
				    },
					fail:res =>{
						console.log(res);
					}
				});
            },
			
			// 登陆
			login() {
				uni.request({
				    url: api.apiUrl+'api/v1/auth/login', //仅为示例，并非真实接口地址。
				    data: {
				        username: this.username,
				        password: this.password,
				        captchaKey: this.captchaKey,
				        captchaCode: this.captchaCode
				    },
					method:"POST",
				    header: {
				        'Content-Type': 'application/x-www-form-urlencoded',
				        'X-Requested-With': 'xmlhttprequest'
				    },
				    success: (res) => {
				        console.log('错误码：'+res.data.code);
						console.log('成功：'+res);
						
						//成功提示
						if(res.data.code!=='B0001'){
							uni.showModal({
								content:"登陆失败,请检查用户名和密码是否正确"
							})
						}else{
							console.log("成功")
							
							// 把token保存到session
							uni.reLaunch({
							  url: '/pages/my/my',
							  success: function() {
							      console.log('跳转成功')
							    },
								error: function(e) {
							      // console.log(e)
								  // console.log('wwwwwwwwwwww')
							    },
							});
							
						}
				    },
					fail:res =>{
						console.log('失败：'+res);
					}
				});
			}
			
			
        }
    }
</script>

<style>

@import "@/static/iconfont/iconfont.css";

.ortherLogin{
	height: 500rpx;
	text-align: center;
	margin-top: 20rpx;
	font-size: 12rpx;
}


.box{
	padding: 15rpx;
	background-color: #f1f1f1;
	height: 100%;
}

.address{
	font-size: 15rpx;
	color: #c1c1c1;
}

.input{
	margin-left: 20rpx;
}

.welcome{
	font-size: 20px;
	font-weight: bolder;
}
.memo{
	font-size: 12px;
	color: #333;
	margin-top: 40rpx;
}

.input-item {
	display: flex;
	margin-left: 12rpx;
	margin-right: 32rpx;
	padding-left: 50rpx;
	height: 50px;
	align-items: center;
	border: solid 1rpx #F7F7F7;
	border-radius: 50rpx;
	background-color: #F7F7F7;
	margin-bottom: 20rpx;
	.input {
		flex: 1;
	}
}

.button {
	height: 40px;
	line-height: 40px;
	margin-top: 60rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
	border-radius: 40px;
	font-size: 20px;
	background-color: #008AFE;
	color: #FFFFFF;
	text-align: center;
}
</style>